<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 
		  css3过度是元素从一种样式逐渐改变为另一种的效果 
		  1.指定要添加效果的css属性
		  2.指定效果的持续时间
		  transition: property duration timing-function delay;
		  transition-property 指定css属性的name
		  transition-duration 指定持续时间
		  transition-timing-function 指定运动曲线
		  transition-delay 指定开始时间
		  
		  如果想要多个属性变化，使用,分割
		  如果想要多个属性都变化，属性写all就可以了
		-->
		<style type="text/css">
			.d1 {
				width: 100px;
				height: 100px;
				background-color: orange;
			}

			.d1 {
				transition: width 2s linear 1s;
			}

			.d1:hover {
				width: 300px;
			}

			.d2 {
				width: 150px;
				height: 150px;
				border: 1px solid orange;
				border-radius: 9px;
				padding: 2px;
				margin-top: 20px;
			}

			.d2 {
				/* transition: all 2s; */
				transition: width 2s, height 5s;
			}

			.d2:hover {
				width: 100%;
			}
		</style>
	</head>
	<body>
		<div class="d1"></div>
		<div class="d2"></div>
	</body>
</html>
